<template>
  <el-row style="margin-top:10px">
    <el-col :span="12" style="background:#132E3F;height: 500px;">
      <div style="weight:100%;height:100%; display: flex;flex-direction: column;">
        <homeHeader title="数据概览"></homeHeader>
        <div
          class="recovery"
          ref="recovery"
          style="weight:100%;height:100%; display: flex;flex-direction: column;"
        ></div>
      </div>
    </el-col>
    <el-col :span="12" style="background:#132E3F;height: 500px;">
      <div style="weight:100%;height:100%; display: flex;flex-direction: column;">
        <homeHeader title="数据概览">
          <el-date-picker
            v-model="value1"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
          ></el-date-picker>
          <el-button type="primary">搜索</el-button>
        </homeHeader>
        <div
          class="recoverys"
          ref="recoverys"
          style="weight:100%;height:100%; display: flex;flex-direction: column;"
        ></div>
      </div>
    </el-col>
  </el-row>
</template>
<script>
export default {
  props: {},
  components: {
  },
  data() {
    return {
      dast: [],
      dids: {},
      list: []
    };
  },
  computed: {},
  methods: {},
  created() {
    this.$http({
      url: "/farmland/mock/farmRecoveryStatics"
    }).then(res => {
      this.list = res.data;
      console.log(this.list)
      let option = {
    legend: {},
    tooltip: {},
    dataset: {
        dimensions: ['product', '2015', '2016', '2017'],
        source: [
            {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},
            {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},
            {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},
            {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}
        ]
    },
    xAxis: {type: 'category'},
    yAxis: {},
    // Declare several bar series, each will be mapped
    // to a column of dataset.source by default.
    series: [
        {type: 'bar'},
        {type: 'bar'},
        {type: 'bar'}
    ]
};

   let option1 = {
    tooltip: {
        trigger: 'item',
        formatter: '{a} <br/>{b}: {c} ({d}%)'
    },
    legend: {
        orient: 'vertical',
        left: 10,
        data: ['直接访问', '邮件营销', '联盟广告', '视频广告', '搜索引擎']
    },
    series: [
        {
            name: '访问来源',
            type: 'pie',
            radius: ['50%', '70%'],
            avoidLabelOverlap: false,
            label: {
                normal: {
                    show: false,
                    position: 'center'
                },
                emphasis: {
                    show: true,
                    textStyle: {
                        fontSize: '30',
                        fontWeight: 'bold'
                    }
                }
            },
            labelLine: {
                normal: {
                    show: false
                }
            },
            data: [
                {value: 335, name: '直接访问'},
                {value: 310, name: '邮件营销'},
                {value: 234, name: '联盟广告'},
                {value: 135, name: '视频广告'},
                {value: 1548, name: '搜索引擎'}
            ]
        }
    ]
};


      this.$nextTick(() => {
        let instance = window.echarts.init(this.$refs.recovery);
        instance.setOption(option);
      });
      this.$nextTick(() => {
        let instance = window.echarts.init(this.$refs.recoverys);
        instance.setOption(option1);
      });
    });
  },
  mounted() {
    //  this.setRight()
  }
};
</script>
<style scoped lang="">
</style>